{#
  This page is being included from

  - templates/hedy-page/code-page.html
#}
{% set editor_height='22rem' %}
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<div id="editor_area" class="relative grid grid-cols-1 lg:grid-cols-2 lg:grid-flow-row-dense gap-4">

  <!-- Row 1: editor, output pane -->
  <div data-editorheight="{{editor_height}}" class="flex flex-col order-1 relative" id="code_editor" style="height: {{editor_height}}">
      <!--The div below is used to send translation of search to Ace through the frontend-->
      <div id="search_placeholder" style="display: none":>{{_('search')}}</div>
      <!-- Status warning -->
      <div data-view="if-submitted"
        class="hidden flex-0 z-20 mt-0 bg-yellow-100 border-b-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md">
        {{_('submitted_header')}}
      </div>

      <!-- The actual editor -->
      <div id="editor" data-cy="editor" style="background: #272822; font-size:0.95em; color: white; direction: {{ g.dir }};" lang="en" blurred='false'
        {% if editor_readonly %}data-readonly="true"{% endif %}
        class="w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height">
      </div>
      <!-- errorbox -->
      <div id="errorbox" data-cy="errorbox"
        class="flex-0 z-20 mt-0 bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert"
        style="display: none;">
        <p class="close-dialog" onclick="hedyApp.error.hide ()"><i class="fa-solid fa-xmark"></i></p>
        <div class="flex">
          <div class="py-1 flex items-center">
            <svg class="fill-current h-6 w-6 text-red-500 ltr:mr-4 rtl:ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path
                d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
            </svg>
          </div>
          <div>
            <p class="details text-sm" data-cy="error_details">An error occurred.</p>
          </div>
        </div>
      </div>
      <!-- warningbox -->
      <div id="warningbox"
        class="flex-0 z-20 mt-0 bg-yellow-100 border-t-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md"
        role="alert" style="display: none;">
        <p data-cy="close_warning" class="close-dialog" onclick="hedyApp.error.hide ()"><i class="fa-solid fa-xmark"></i></p>
        <div class="flex">
          <div class="py-1 flex items-center">
              <div id="warningbox_icon">
                  <svg class="fill-current h-6 w-6 text-yellow-500 ltr:mr-4 rtl:ml-4" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
              <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
            </svg>
              </div>
          </div>
          <div>
            <p class="details text-sm">An error occurred.</p>
          </div>
        </div>
      </div>
      <!-- okbox -->
      <div id="okbox" data-cy="okbox"
        class="flex-0 z-20 mt-0 bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md"
        role="alert" style="display: none;">
        <div class="flex">
          <div class="flex w-full justify-between items-center">
            <p class="caption font-bold">Success</p>
            <button class="hidden" id="confetti_button" onclick="hedyApp.confetti_cannon()">🎉</button>
            <!-- <p class="details text-sm">Something went according to plan.</p> -->
          </div>
        </div>
      </div>
  </div>
  <div data-editorheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-hidden" id="code_output" style="height: {{editor_height}}">
    <div id="output" data-cy="output" tabindex=0 class="flex-1 rounded p-2 px-3 color-white w-full text-lg overflow-auto" style="background: #272822; min-height: 3rem;"></div>
    <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
    <div class="overflow-auto flex-0 bottom-0 w-full z-20 bg-blue-100">
      <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
            <div class="h-2 z-10 bg-blue-500 content-center justify-center grid text-center">
                <div class="w-fit bg-blue-500 text-white px-5 rounded-lg text-sm">
                    <i class="fa-solid fa-tag text-lg mt-2 mr-2"></i>
                    <i id="variables_arrow" class="fa-solid fa-angle-up text-lg mt-2 ml-2"></i>
                </div>
            </div>
      </div>
      <div class="inline-block flex z-10 text-white bg-blue-100 rounded-lg max-h-36" id="variables">
          <ul id="variable_list" data-cy="variable_list" class="bg-blue-100 text-blue-500 px-4 whitespace-nowrap list-none mb-0"
              style="display: none; margin-left: 0px;"
              _="on mutation of @style
                set arrow to #variables_arrow
                if *display == 'none'
                    remove .fa-angle-down from arrow
                    add .fa-angle-up to arrow
                else
                    remove .fa-angle-up from arrow
                    add .fa-angle-down to arrow
                end"
          >
          </ul>
          <!-- For some reason the Tailwind ml-0 doesn't do the trick here -->
      </div>
    </div>
    <div id="inline_modal" class="flex-0 bottom-0 w-full z-20">
      <div id="ask_modal" data-cy="ask_modal"
           class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100" style="display: none">
        <!--Title-->
        <div class="flex justify-between items-center">
          <p class="text-2xl font-bold caption">Header</p>
        </div>
        <!--Body-->
        <!--Body-->
        <form>
          <div class="my-2 flex">
            <input type="text" class="border border-green-400 rounded p-2 px-3 flex-1" placeholder="{{_('enter_text')}}">
            <input type="submit" data-cy="submit_ask_modal" class="flex-0 green-btn-new ltr:ml-3 rtl:mr-3" value="{{_('enter')}}"></p>
          </div>
        </form>
      </div>
      <div id="keybinding_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
           style="display: none">
        <!--Title-->
        <div class="flex justify-between items-center">
          <p class="text-2xl font-bold caption">{{_('keybinding_waiting_for_keypress')}}</p>
        </div>
      </div>
      <div id="sleep_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-1 rounded bg-green-100"
           style="display: none;z-index: 99;">
        <!--Title-->
        <div class="flex justify-between items-center">
          <p class="text-2xl font-bold caption">{{_('sleeping')}}</p>
        </div>
      </div>
    </div>
    <div id="dynamic_buttons" class="flex mt-3 gap-2 overflow-auto border-4 border-blue-600 rounded bg-blue-300 py-2 px-3" style="display: none">
    </div>
  </div>
  <!-- Col 2: run button (move below editor in single-column layout), level buttons -->
  <div class="order-2 lg:order-3" id="code_related_buttons">
    <div id="button_row" class="flex flex-row gap-2 mb-4">
      <div id="run_button_container" class="gap-2 flex flex-row flex-initial">
          <button id="runit" data-cy="runit" class="green-btn-new" title="{{_('run_code_button')}}" data-loading disabled onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "run")'>
            <span class="fa fa-play ltr:mr-1 rtl:ml-1"></span>
            <span>{{_('run_code_button')}}</span>
          </button>
          <button id="stopit" data-cy="stopit" class="red-btn-new" title="{{_('stop_code_button')}}" onclick="hedyApp.stopit()" style="display: none;">{{_('stop_code_button')}}</button>
          <div class="flex-1 md:hidden"></div>
          <button id="debug_button" class="blue-btn-new" title="{{_('debug')}}" data-loading disabled onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "debug")'>
              <span class="fa fa-bug ltr:mr-1 rtl:ml-1"></span>
              {{_('debug')}}
           </button>
      </div>
      <div id="debug_container" class="flex-initial gap-2 inline-flex items-center">
          <button id="debug_restart" class="green-btn-new hidden" title="{{_('restart')}}" onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "debug")'>
            <span class="fa fa-repeat ltr:mr-1 rtl:ml-1"></span>
            <span class="inline-flex lg:hidden xl:inline-flex" >{{_('restart')}}</span>
          </button>
          <button id="debug_stop" class="red-btn-new hidden" title="{{_('stop')}}" onclick="hedyApp.stopDebug()">
            <span class="fa fa-stop ltr:mr-1 rtl:ml-1"></span>
            <span class="inline-flex	 lg:hidden xl:inline-flex">{{_('stop')}}</span>
          </button>
          <button id="debug_continue" class="btn-shape-new bg-blue-400 hover:bg-blue-300 text-white hidden" title="{{_('continue')}}" onclick='hedyApp.runit({{ level }}, "{{ g.lang }}", {% if raw %}{{raw | lower}}{% else %}false{% endif %}, {{_('already_program_running')|default(None)|tojson}}, "continue")'>
            <span class="fa fa-forward ltr:mr-1 rtl:ml-1 {% if g.dir == "rtl" %}rotate-180{% endif %}"></span>
            <span class="inline-flex	 lg:hidden xl:inline-flex">{{_('continue')}}</span>
        </button>
      </div>
      <div class="flex-1"></div>
      {% if username and current_user_is_in_class %}
        <button class="blue-btn-new w-fit" id="hand_in" title="{{_('hand_in')}}" _="on click remove .hidden from #share_modal" data-loading disabled >
          <i class="fa-solid fa-paper-plane ltr:mr-1 rtl:ml-1"></i>
          {{_('hand_in')}}
        </button>
      {% endif %}
    </div>
    {% if not raw %}
    <div id="not_logged_in_warning" data-cy="not_logged_in_warning" class="hidden bg-yellow-200 text-sm px-4 py-1 border-2 border-yellow-400 mb-4">
      {{ _('not_logged_in_cantsave') }}. <a href="/login" class="text-black">{{_('login_to_save_your_work')}}</a>
    </div>
    {% endif %}
    <div class="flex justify-between gap-2 items-start overflow-visible">
      <div id="saveMicrobitFilesContainer" {% if not microbit_feature %} class="hidden" {% endif %} >
        <button id="runMicrobit" class="green-btn-new" onclick="hedyApp.saveMicrobit({{ level }});" > {{ _('Save Microbit code ') }}
            <img src="{{ static('/images/microbit_logo_icon_248480.png') }}" style="width: 25px; height: 25px; margin-left: 1px; display: inline;" alt=""/>
        </button>
      </div>      
      {% if show_edit_button %}
          <button onclick="window.location = '/hedy/{{level}}/{{program_id}}'" class="blue-btn-new ltr:ml-4 rtl:mr-4">{{_('edit_code_button')}}</button>
      {% else %}
          <img src="{{static('/images/Hedylightbulb_1.svg')}}" onclick="hedyApp.modalStepOne()" class="hidden h-28 -mt-2" id="repair_button" alt="{{_('repair_program_logo_alt')}}">
      {% endif %}
      {% if editor_readonly and is_admin %}
              <button onclick="hedyApp.delete_program('{{ program_id }}', {{ 0 }}, '{{_('delete_confirm')}}')" class="red-btn-new">{{_('delete')}}</button>
      {% endif %}
    </div>
  </div>
  <div class="order-3 lg:order-4" id="code_related_buttons">
    <div class="flex flex-row mb-4 gap-4">
      <button id="hide_editor" class="blue-btn-new rounded items-center hidden lg:inline-block" data-loading disabled onclick="hedyApp.hide_editor();" title="{{ _('expand_output') }}">
        <i class="fa-solid fa-caret-left"></i>
        <span class="hidden xl:inline-flex"> {{ _('expand_output') }} </span>
      </button>
      <button id="show_editor" class="blue-btn-new rounded items-center hidden lg:inline-block" onclick="hedyApp.show_editor();" style="display: none;" title="{{ _('show_editor') }}">
        <i class="fa-solid fa-caret-right"></i>
        <span class="hidden xl:inline-flex"> {{ _('show_editor') }}</span>
      </button>
      <div class="hidden lg:block lg:flex-1"></div>
      <div id="save_files_container" class="hidden">
        <button id="saveFiles" class="blue-btn-new" onclick="hedyApp.saveMachineFiles();" title="{{ _('save_turtle_drawing') }}">
          <i class="fa-solid fa-floppy-disk"></i>
          <span class="inline-flex lg:hidden 2xl:inline-flex">{{ _('save_turtle_drawing') }}</span>
        </button>
      </div>
      <div class="block flex-1"></div>
      <div id="speak_container" class="hidden flex flex-row items-center w-max overflow-visible">
        <button id="speak_mute_button" class="blue-btn-new ltr:mr-1 rtl:ml-1" data-muted="false" onclick="hedyApp.toggleSpeakMute()">
          <span class="fa fa-volume-high ltr:mr-1 rtl:ml-1"></span>
        </button>
        <select id="speak_dropdown" class="appearance-none w-40 bg-gray-200 border border-gray-600 text-gray-700 py-1 px-4 rounded">
          <option value="">{{ _('choose_a_voice') }}</option>
        </select>
      </div>
    </div>
  </div>
  <div class="flex order-4 justify-center md:col-span-2 my-6 lg:my-0">
    <button id="more_adventures" class="blue-btn-new rounded items-center" onclick="hedyApp.moreAdventures()">
      <i class="fa-solid fa-angle-up"></i>
      <span> {{ _('more_adventures') }} </span>
    </button>
  </div>

</div>
